<template>
    <div class="search-history">
        <van-cell
          title="搜索历史"
        >
          <div v-if="isDeleteShow">
            <!--
              prop 数据如果是引用类型（数组、对象）可以修改，
              注意这个修改指的是：user.name = 'Jack'、arr.push(123)、arr.splice(0,1)

              但是任何 prop 数据都不能重新赋值：xxx = xxx

              如果你想要让 prop 数据 = 新的数据：让父组件自己修改
              -->
              <span
                @click="$emit('update-histories', [])"
              >全部删除</span>
              &nbsp;&nbsp;
              <span @click="isDeleteShow = false">完成</span>
          </div>
          <van-icon
             v-else
             name="delete-o"
             @click="isDeleteShow = true"
          />
        </van-cell>
        <van-cell
          :title="history"
          v-for="(history,index) in searchHistories"
          :key="index"
          @click="onDelete(history, index)"
        >
          <van-icon
            name="close"
            v-show="isDeleteShow"
          />
        </van-cell>
    </div>
</template>

<script>
// import { setItem } from '@/utils/storage'

export default {
    name: 'SearchHistory',
    components: {},
    props: {
      searchHistories: {
        type: Array,
        required: true
      }
    },
    data () {
        return {
          isDeleteShow: false // 删除的显示状态
        }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
      onDelete (history, index) {
        if (this.isDeleteShow) {
          this.searchHistories.splice(index, 1)
          // 持久化数据
          // setItem('search-histories', this.searchHistories)
          return
        }

        // 非删除状态，展示搜索结果
        this.$emit('search', history)
      }
    }
}
</script>

<style scoped>
.search-history span{
  cursor: pointer;
}
.van-icon{
  cursor: pointer;
}
</style>